<template>
    <div>
        <el-row>
            <el-col :span="4"><el-button type="primary" plain @click="add()">添加</el-button></el-col>
            <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
            <el-col :span="4"><el-input v-model="input" placeholder="请输入内容" prefix-icon="el-icon-search"></el-input></el-col>
            <el-col :span="4"><el-button type="primary" plain>查询</el-button></el-col>
            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        </el-row> 
        <el-table :data="tableData" border style="width: 97%">
            <el-table-column prop="name" label="姓名" width="180" align="center"></el-table-column>
            <el-table-column prop="idcard" label="身份证号" width="180" align="center"></el-table-column>
            <el-table-column prop="gender" label="性别" width="60px" align="center"></el-table-column>
            <el-table-column prop="source" label="接触来源" ></el-table-column>
            <el-table-column prop="address" label="隔离地址" ></el-table-column>
            <el-table-column label="隔离开始日期" align="center" width="120px">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.date }}</span>
                </template>
            </el-table-column>
            
            <el-table-column label="操作" align="center" width="280px">
                <template slot-scope="scope">
                <el-button size="mini" @click="shouwByid()">编辑</el-button>
                <el-button size="mini" type="primary" @click="open">解除隔离</el-button>
                <el-button size="mini" type="primary" plain @click="translate()">转为患者</el-button>
                </template>
            </el-table-column>
        </el-table>

         <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
        </el-pagination>

        <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <el-form :model="form" ref="form" label-width="120px" :rules="rules">          
            <el-row> 
                <el-col :span="12"> 
                    <el-form-item label="姓名" prop="name" >
                        <el-input v-model="form.name" placeholder="姓名"></el-input>
                    </el-form-item>  
                </el-col>
                <el-col :span="12">
                    <el-form-item label="性别">
                        <el-radio-group v-model="form.gender">
                            <el-radio :label="0">女</el-radio>
                            <el-radio :label="1">男</el-radio>
                        </el-radio-group>
                    </el-form-item>   
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12"> 
                    <el-form-item label="身份证号" prop="idcard">
                        <el-input v-model="form.idcard" placeholder="身份证"></el-input>
                    </el-form-item>  
                </el-col>
                <el-col :span="12">
                    <el-form-item label="年龄">
                <el-input-number v-model="form.age" :min="1" :max="100" ></el-input-number>
            </el-form-item>  
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12"> 
                    <el-form-item label="电话号码" prop="phone">
                        <el-input v-model="form.phone"></el-input>
                    </el-form-item>  
                </el-col>
                <el-col :span="12">
                    <el-form-item label="接触来源" >
                        <el-input v-model="form.source"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12"> 
                    <el-form-item label="隔离地址" >
                        <el-input v-model="form.gladdress"></el-input>
                    </el-form-item>  
                </el-col>
                <el-col :span="12">
                    <el-form-item label="隔离开始日期" prop="">
                        <el-date-picker
                            v-model="form.date"
                            type="date"
                            placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12"> 
                    <el-form-item label="住址" prop="">
                        <el-input v-model="form.address"></el-input>
                    </el-form-item>  
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <!-- <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button> -->
            <el-button type="primary" @click="queding">确 定</el-button>
        </div>
        </el-dialog>

        <el-dialog title="转为患者" :visible.sync="dialogFormVisible3">
            <el-form :model="form3" label-width="80px">
                <el-row> 
                    <el-col :span="12"> 
                        <el-form-item label="住院时间">
                            <el-date-picker
                                v-model="form3.date"
                                type="date"
                                placeholder="选择日期">
                                </el-date-picker>
                        </el-form-item>  
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="症状">
                            <el-input v-model="form3.symptom"></el-input>
                        </el-form-item>   
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12"> 
                        <el-form-item label="治疗医院">
                            <el-input v-model="form3.hospital"></el-input>
                        </el-form-item>  
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否重症">
                            <el-radio-group v-model="form3.isNotHealthy">
                                <el-radio :label="0">否</el-radio>
                                <el-radio :label="1">是</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12"> 
                        <el-form-item label="备注">
                            <el-input type="textarea" v-model="form3.desc" rows="4" placeholder="请输入"></el-input>
                        </el-form-item>  
                    </el-col>   
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible3 = false">取 消</el-button>
                    <el-button type="primary" @click="dialogFormVisible3 = false">确 定</el-button>
                </div>
        </el-dialog>
    </div>
</template>
<script>
import request from '@/utils/request'
export default {
  data() {
    return {
        input: '',
        title:"",
        tableData: null,
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4,
        dialogFormVisible: false,
        // dialogTableVisible2: false,
        dialogFormVisible2: false,
        dialogFormVisible3: false,
        form: {    
            name:'',  
            gender:'',
            idcard:'',
            age:'',
            phone:'',
            source:'',
            gladdress:'',
            date: '',
            address:'',
        },
        form3:{},

        formLabelWidth: '120px',
        rules:{
            name: [
                { required: true, message: '请输入姓名', trigger: 'blur' },
                { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'change' }
            ],
            idcard: [
                { required: true, message: '请输入身份证号', trigger: 'blur' },
                { min: 18, max: 18, message: '请输入正确的身份证号(18位)', trigger: 'blur' }
            ],
            phone: [
                { required: true, message: '请输入手机号', trigger: 'blur' },
                { min: 11, max: 11, message: '长度在11 个字之内', trigger: 'blur' },
                {
                    pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
                    message: '请输入正确的手机号码',
                    trigger: 'change'
                }
          ],
        }
    }
  },
  created(){
      this.fetchData()
  },
  methods: {
      fetchData() {
          request({
              url:'../patient_list.json',
              method:'get'
          }).then((response)=>{
              this.tableData=response.data
          })
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        add(){//设置点击添加后弹出的对话框
            this.dialogFormVisible=true
            this.form={}
            this.title="添加"
            // console.log(this.form)
        },
        shouwByid(){//设置点击编辑后弹出的对话框
            request({
                url:'../closecontact.json',
                method:'get'
            }).then((response)=>{
                this.form=response.data
            })
            this.dialogFormVisible=true
            this.title="修改"

        },
        open() {//设置解除隔离的对话框
            this.$confirm('您确认要解除隔离吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
            this.$message({
                type: 'success',
                message: '删除成功!'
            });
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
            });
        },
        translate(){//设置转为患者的对话框显示
            this.dialogFormVisible3=true
        },
        queding(){//设置标题为（添加，编辑）的表单的确定按钮点击后触发的函数
            this.dialogFormVisible = false
            this.$refs["form"].validate(
                (valid) => {//箭头函数
                    if (valid) {//判断，校验通过，执行下面的代码
                    // alert('submit!');//例子，真正的代码是ajax请求
                        this.$message({
                            message: '恭喜你，这是一条成功消息',
                            type: 'success'
                        });
                    } else {//校验未通过，某一条件不满足
                        console.log('error submit!!');
                        return false;
                    }
            });
        }    
        
    }
}
</script>